<div class="p-4">
  <div class="table-responsive">
    <table class="table table-hover">
      <thead class="table-light">
        <tr>
          <th>Year</th>
          <th class="text-end">Visitors</th>
          <th class="text-end">Orders</th>
          <th class="text-end">Income</th>
          <th class="text-end">Expenses</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>2007</strong></td>
          <td class="text-end">300</td>
          <td class="text-end">800</td>
          <td class="text-end">900</td>
          <td class="text-end">300</td>
        </tr>
        <tr>
          <td><strong>2008</strong></td>
          <td class="text-end">1,170</td>
          <td class="text-end">860</td>
          <td class="text-end">1,220</td>
          <td class="text-end">564</td>
        </tr>
        <tr>
          <td><strong>2009</strong></td>
          <td class="text-end">260</td>
          <td class="text-end">1,120</td>
          <td class="text-end">2,870</td>
          <td class="text-end">2,340</td>
        </tr>
        <tr>
          <td><strong>2010</strong></td>
          <td class="text-end">1,030</td>
          <td class="text-end">540</td>
          <td class="text-end">3,430</td>
          <td class="text-end">1,200</td>
        </tr>
        <tr>
          <td><strong>2011</strong></td>
          <td class="text-end">200</td>
          <td class="text-end">700</td>
          <td class="text-end">1,700</td>
          <td class="text-end">770</td>
        </tr>
        <tr>
          <td><strong>2012</strong></td>
          <td class="text-end">1,170</td>
          <td class="text-end">2,160</td>
          <td class="text-end">3,920</td>
          <td class="text-end">800</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="row mt-4 g-3">
    <div class="col-md-3">
      <div class="card text-center" style="border-left: 4px solid #b5799e;">
        <div class="card-body">
          <div class="text-muted small mb-1">Total Visitors</div>
          <h3 class="mb-0" style="color: #b5799e;">3,130</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center" style="border-left: 4px solid #579da9;">
        <div class="card-body">
          <div class="text-muted small mb-1">Total Orders</div>
          <h3 class="mb-0" style="color: #579da9;">6,180</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center" style="border-left: 4px solid #e26666;">
        <div class="card-body">
          <div class="text-muted small mb-1">Total Income</div>
          <h3 class="mb-0" style="color: #e26666;">14,040</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center" style="border-left: 4px solid #1e825e;">
        <div class="card-body">
          <div class="text-muted small mb-1">Total Expenses</div>
          <h3 class="mb-0" style="color: #1e825e;">5,174</h3>
        </div>
      </div>
    </div>
  </div>
</div>
